
<template>
	<div class="full-height">
		<van-nav-bar v-if="isTitle || switch153 === 1" fixed title="幸运大转盘" left-arrow class="head-color color-white"
			@click-left="clickLeft" />
		<div v-else class="flex flex-v-c head-color pos-f">
			<svg-icon icon-class="right" class="fs-22 mt-20 tran color-white" @goPage="clickLeft" />
			<div class="text-show-line-1 pos-r color-white fs-28 ml-20">
				<svg-icon icon-class="location" class="mr-10 "/>
				{{ storeName }}
			</div>
		</div>
		<div class="has-top">
			<div class="head-top" ref="top">
				<div class="secbg"><img src="../../assets/images/bigWheel.png" /></div>
			</div>
			<div :style="'padding-top:' + pageHeight + 'px'">
				<van-list v-model="loading" :finished="finished" :finished-text="finishedText" :immediate-check="false" @load="moreData">
					<div class="mg-24" v-if="wheelList && wheelList.length > 0">
						<div class="info bg-white mb-16" v-for="(item, index) in wheelList" :key="index">
							<imgBox v-if="item.Image" :img-url="item.Image" class="is-216 br-12 picimg" @click="goaction(item)"/>
							<img v-else src="../../assets/images/bigwellicon.png" class="is-216 br-12 picimg"  @click="goaction(item)"/>
							<div class="inforight">
								<p class="infoname" @click="goaction(item)">{{ item.ActivityName }}</p>
								<div class="infotime"><div class="dot"></div><div>{{item.StartTime}}至{{item.EndTime}}</div></div>
								<div v-if="item.Description" class="infodesc" @click="activeDesc(item.Description)"><div class="dot"></div><div class="text-show-line-1">活动规则：{{item.Description}}</div></div>
								<div class="flex flex-s-c price">
									<div class="">
										<span class="fs-24">参与积分：</span>
										<span class="fs-52 fw-b mr-5">{{ item.NeedIntegral }}</span>
									</div>
									<div class="msbtn fs-28" @click="goaction(item)">立即抽奖</div>
								</div>
							</div>
						</div>
					</div>
				</van-list>
			</div>
		</div>
		<van-popup v-model="descShow" round closeable close-icon="close">
			<div class="descInfo">
				<div class="fs-30 pt-40 fw-b" style="text-align: center;">活动规则</div>
				<div class="fs-26 descstyle">{{desc}}</div>
			</div>
		</van-popup>
	</div>
</template>

<script>
import SvgIcon from 'components/SvgIcon'
import imgBox from 'components/imgBox';
import { GetSeckillActivityByPage, GetNowTime, GetSeckillStartTimeList } from 'api/activity'
import { GetBigWheelActivityPage } from 'api/marketing'
import { GetUserDetail } from 'api/member'
import { GetStoreInfo } from 'api/store'
import { GetBusinessFunction } from 'api/businessSetting'
import nearbyShop from '../shopProductList/nearbyShop.vue'

export default {
	components: {
		SvgIcon, imgBox, nearbyShop
	},
	data() {
		return {
			loading: false, // 加载load
			finished: false, // 无更多数据
			nowTime: null,
			storeId: 0,
			wheelList: [],
			requestData: {
				"state": 1,
				"storeId": 0,
				"pageIndex": 1,
				"pageSize": 10,
				IsInTime:1
			},
			tabs: [],
			isTitle: true, //是否显示标题
			isRefresh: false, //是否刷新页面(判断数据改变)
			interval: null,
			classActive: 0,
			longago: false,
			storeName: '请选择门店',
			nearbyShopShow: false, //门店弹窗
			switch153: 0,
			isActive: true,
			// 滚动状态
			totalAmout: 0,
			scollRequest: true,
			end: false,
			pageHeight: 0,
			finishedText:'没有更多了',
			descShow:false,
			desc:''
		}
	},
	created() {
		localStorage.removeItem('storeId')
		this.GetBusinessFunction()
		if (this.$route.params.id === '1') {
			this.isTitle = false
		}
		if (this.$route.query.storeId) {
			this.storeId = this.$route.query.storeId
			this.requestData.storeId = this.storeId
			this.GetStoreInfo()
		} else if (localStorage.getItem('storeId')) {
			this.storeId = localStorage.getItem('storeId')
			this.requestData.storeId = this.storeId
			this.GetStoreInfo()
		} else if (this.$route.params.id === '1') {
			this.GetUserDetail()
		}

		this.requestData.storeId = this.$route.params.id
		if (this.$route.query.hideStore === '1') {
			this.isTitle = true
		}
	},
	mounted() {
		if (this.storeId !== 0 || this.requestData.storeId === '0') {
			this.getskeckilldata()
		}
		this.$nextTick(() => {
			this.pageHeight = this.$refs.top.offsetHeight + 6
		})
	},
	methods: {
		GetStoreInfo() {
			const obj = {}
			obj.id = this.storeId
			GetStoreInfo(obj).then(res => {
				if (res.Data) {
					this.storeName = res.Data.Name
				}
			})
		},
		GetUserDetail() {
			GetUserDetail().then(res => {
				if (res.Data) {
					this.storeId = res.Data.DisId
					this.requestData.storeId = this.storeId
					if (this.storeId !== 0) {
						this.GetStoreInfo()
						this.getskeckilldata()
					}
				}
			})
		},
		//获取开关权限
		GetBusinessFunction() {
			GetBusinessFunction(153).then(res => {
				if (res) {
					this.switch153 = res.Data[0].Value;
				}
			})
		},
		getskeckilldata() {
			const _this = this
			_this.loading = true
			console.log(this.requestData, "fan")
			GetBigWheelActivityPage(this.requestData).then((res) => {
				if (res.Data) {
					if (res.State == 0) {
						return
					}
					if (_this.requestData.pageIndex >= res.Data.TotalAmout) {
						_this.finished = true
					} else {
						_this.finished = false
					}
					_this.loading = false
					_this.totalAmout = res.Data.TotalAmout
					res.Data.Data.forEach(x => {
						x.StartTime = x.StartTime.substring(0,x.StartTime.length-9)
						x.EndTime = x.EndTime.substring(0,x.EndTime.length-9)
						this.wheelList.push(x);
					})
					if(this.wheelList.length == 0 && this.requestData.pageIndex==1){
						this.finishedText = '~暂无数据~'
					}
					console.log(this.wheelList)
				} else {
					_this.finished = true
					_this.loading = false
				}
			})
		},
		activeDesc(item) {
			this.descShow = true;
			this.desc = item
		},
		// 上拉加载更多
		moreData() {
			this.requestData.pageIndex = this.requestData.pageIndex + 1
			this.getskeckilldata()
		},
		// 滚动事件触发下拉加载
		onScroll() {
			const _this = this
			if (_this.scollRequest === true) {
				if (this.$utils.getScrollHeight('scrollBox') - this.$utils.getClientHeight('scrollBox') - this.$utils.getScrollTop('scrollBox') <= 5) {
					_this.scollRequest = false
					// alert('触发！！！')
					console.log('加载')
					_this.scollTop = this.$utils.getScrollTop('scrollBox')
					if (_this.requestData.pageIndex < _this.totalAmout) {
						_this.requestData.pageIndex++
						_this.GetWholeSaleListForSku()
					} else {
						console.log('end')
						_this.end = true
					}
					// }
				}
			}
		},
		changeStartTime(item) {
			if (this.currStartTime) this.currStartTime.active = false
			this.currStartTime = item
			this.currStartTime.active = true
		},
		//立即秒杀
		goaction(item) {
			console.log(item, "跳转")
			let id = item.ID
			let store_id = this.StoreId
			if (store_id > 0) {
				localStorage.setItem('storeId', store_id)
			}
			window.location.href = this.$LocalDomain + '/m/activity/BigWheelActivity/' + id
		},
		clickLeft() {
			localStorage.removeItem('storeId')
			this.$utils.back(this.$route.path)
		},
	}
}
</script>
<style lang="scss" scoped>
.color-white {
	/deep/.van-icon {
		color: #fff;
	}

	/deep/.van-nav-bar__title {
		color: #fff;
	}
}
.descInfo{
	width: 600px;
	padding-bottom: 50px;
	.descstyle{
		padding: 0 32px;
		line-height: 1.5;
		padding-top: 20px;
	}
}
.head-color {
	background: linear-gradient(180deg, #FE3E4D 0%, #FE5E64 100%);
}

.tran {
	transform: rotateZ(180deg);
	margin: 0 20px;
}

.goStore {
	position: absolute;
	right: 10px;
	top: 16px;
}

.pos-f {
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 1111;
	height: 88px;
}

.info {
	border-radius: 16px;
	height: 264px;
	padding: 24px;
	display: flex;

	.picimg {
		flex: 1;
	}
}

.inforight {
	position: relative;
	margin-left: 24px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	height: 216px;

	.infoname {
		font-size: 30px;
		font-weight: bold;
		width: 406px;
		height: 42px;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
	}
	.dot{
		width: 8px;
		height: 8px;
		border-radius: 4px;
		margin-right: 10px;
	}
	.infotime{
		display: flex;
		justify-content: flex-start;
		align-items: center;
		color: #666;
		.dot{
			background: #FF731E;
		}
	}
	.infodesc{
		display: flex;
		justify-content: flex-start;
		align-items: center;
		color: #666;
		.dot{
			background: #78FF1E;
		}
	}
	.specall {
		display: inline-flex;
	}

	.spec {
		background: #FEF8E1;
		border-radius: 8px;
		color: #FE8000;
		text-align: center;
		font-size: 22px;
		margin-right: 15px;
		height: 40px;
		line-height: 40px;
		padding: 0 10px;
	}

	.originprice {
		text-decoration: line-through;
		color: #B2B2B2;
	}

	.msbtn {
		background: linear-gradient(to right, #FE8224, #FF460A);
		width: 140px;
		height: 60px;
		line-height: 60px;
		border-radius: 16px;
		text-align: center;
		box-shadow: 0px 4px 14px #fff4ed;
		color: white;
	}

	.endbtn {
		background: #b8b8b8;
		width: 140px;
		height: 60px;
		line-height: 60px;
		border-radius: 16px;
		text-align: center;
		box-shadow: 0px 4px 14px #fff4ed;
		color: white;
	}
}

.solidheight {
	height: 40px;
	width: 100%;
}

.scrollClass {
	margin-top: 28px;
	display: flex;
	overflow-x: auto;
	position: absolute;
	bottom: 0;
	width: 100%;

	li {
		width: 25%;
		color: #fff;
		flex-shrink: 0;
		margin-right: 10px;
		padding-top: 10px;
		padding-bottom: 10px;
	}
}

::-webkit-scrollbar {
	/* 隐藏滚动条 */
	display: none;
}

.head-top {
	height: 272px;
	background:#FE7232;
	position: relative;
	position: fixed;
	z-index: 1111;
}

.activeClass {
	background: #fff;
	border-radius: 16px 16px 0 0;

	.fs-name {
		color: #FF6F22;
	}

	.fs-time {
		color: #FF6F22;
	}
}

.fs-name {
	line-height: 1.2;
}

.fs-time {
	color: #fff;
}

.width-100 {
	width: 100%;
}

.price {
	height: 60px;
	color: #FF731E;
}

.van-hairline--bottom:after {
	border-bottom: none;
}

.full-height {
	height: 100vh;
	background: #FE7232;
}

.secbg {
	height: 272px;
	//img{
	//	width: 100%;
	//	height: 100%;
	//}
}
/deep/.van-list__finished-text {
  color: #fff;
}
</style>
